<template>
    <div class="org-chart-container">
        <m-table :columns="columns" ref="tableRef" :api="getMenuList" :pagination="false" title="权限列表">
            <template #button>
                <a-button shape="round" @click="editPopupRef?.open('add')">
                    <template #icon>
                        <Icon name="ant-icon-PlusOutlined" size="12px" />
                    </template>
                </a-button>



            </template>

            <template #type="{ record }">
                <a-tag v-if="record.type === MenuType.CATALOGUE" color="blue">目录</a-tag>
                <a-tag v-else-if="record.type === MenuType.MENU" color="green">菜单</a-tag>
                <a-tag v-else color="red">按钮</a-tag>
            </template>


            <template #icon="{ record }">
                <a-button>
                    <icon v-if="record.icon" :name="record.icon" />
                    <span v-else>-</span>
                </a-button>
            </template>

            <template #action="{ record }">
                <a-space>
                    <a-button type="link" v-perms="['/adminapi/system.permission/save']" v-if="record.type != MenuType.BUTTON"
                        @click="editPopupRef?.open('add', { parent_id: record.id })">新增子菜单</a-button>

                    <a-button type="link"  v-perms="['/adminapi/system.permission/update']" @click="editPopupRef?.open('edit', record)">编辑</a-button>
                    <a-popconfirm :title="`确定删除 [${record.name}] 吗？`" ok-text="确定" cancel-text="取消"
                        @confirm="confirm(record.id)">
                        <a-button type="link" danger v-perms="['/adminapi/system.permission/delete']">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </m-table>
        <edit-popup ref="editPopupRef" @success="() => tableRef?.run()" />
    </div>
</template>

<script setup lang="ts">
import editPopup from './components/edit.vue'
import { getMenuList, deleteMenu } from '@/api/system/permission/auth'
import { MenuType } from '@/utils/enums/appEnums'
// 表格引用
const tableRef = ref()

const editPopupRef = ref<InstanceType<typeof editPopup>>()

const columns = [

    {
        title: '菜单名称',
        dataIndex: 'name',
    },
    {
        title: 'ID',
        dataIndex: 'id',
        width: 100,
        align: 'center',
    },
    {
        title:'所属应用',
        dataIndex:'app',
    },
    {
        title: '菜单路径',
        dataIndex: 'path',
        width: 200,
    },{
        title:'权限地址',
        dataIndex:'perms',
    }, {
        title: '图标',
        dataIndex: 'icon',
        align: 'center',
        width: 80,
    }, {
        title: '菜单类型',
        dataIndex: 'type',
        width: 100,
    }, {
        title: '菜单排序',
        dataIndex: 'sort',
        width: 100,
    }, {
        title: '操作',
        dataIndex: 'action',
        width: 100,
        align: 'center',
    }
]

const confirm = async (id: number) => {
    try {
        await deleteMenu(id)
        tableRef.value?.run()
    } catch (error) {
        console.log(error)
    }
}



</script>
